<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>榜单-创建榜单</title>
    <!-- **************通用头部  每页页面都引入  start-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
<link rel="stylesheet" type="text/css" href="./AmazeUI/assets/css/amazeui.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="./js/common/jquery-1.9.1.js"></script>
<script type="text/javascript" src="AmazeUI/assets/js/amazeui.js"></script>
<script type="text/javascript" src="js/plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/plugin/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<!-- **************通用头部  每页页面都引入  end-->
</head>
  
<body>
    <!-- 头部  start****************************************************** -->
    <div class="coms-layout-header">
        <a href="#" class="logo">小鱼生活消费大平台</a>
        <ul class="header-nav">
            <li class="active"><a href="">首页</a></li>
            <li><a href="">社区</a></li>
            <li><a href="">好店</a></li>
            <li><a href="">行业</a></li>
            <li><a href="">白卡</a></li>
        </ul>
        <div class="header-userinfo">
            <a class="info-name" href="javascript:;">onetao<span class="arrow"></span></a>
            <ul class="dropdown-list">
                <li><a href="#">操作1</a></li>
                <li><a href="#">操作2</a></li>
                <li><a href="#">操作3</a></li>
            </ul>
        </div>

        <div class="header-notice">
            <a class="tit" href="javascript:;">通知<b><i>8</i></b></a>
            <ul class="dropdown-list">
                <li><a href="#">操作1</a></li>
                <li><a href="#">操作2</a></li>
                <li><a href="#">操作31</a></li>
            </ul>
        </div>
    </div>
<!-- 头部  end****************************************************** --> <!-- side  start****************************************************** -->
<div class="coms-layout-aside">
    <div class="aside-unfold"><i class="iconfont f18">&#xe6d4;</i></div>
    <div class="aside-menu-scroll">
        <ul class="aside-menu">
            <li class="treeview active hactive">
                <a href="javascript:void(0)" data-tip="榜单管理">
                    <i class="iconfont f14">&#xe65d;</i>
                    <span class="txt">榜单管理</span>
                    <span class="more"></span> 
                </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14"></i><span class="txt">榜单管理1-1</span></a>
                    </li>
                    <li class="treeview active hactive">
                        <a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                             <i class="iconfont f14">&#xe65d;</i>
                            <span class="txt">榜单管理1-2</span>
                            <span class="more"></span> 
                        </a>
                        <ul class="treeview-menu">
                            <li class="current"><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-2-1</span></a></li>
                            <li><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-2-2</span></a></li>
                            <li><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-2-3</span></a></li>
                            <li><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-2-4</span></a></li>
                        </ul>
                    </li>
                    <li class="current"><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-3</span></a></li>
                    <li><a href="#"><span class="fl">&nbsp;&nbsp;&nbsp;&nbsp;</span><i class="iconfont f14">&#xe65d;</i><span class="txt">榜单管理1-4</span></a></li>
                </ul>
            </li>

            <li class="current">
                <a href="javascript:void(0)" data-tip="榜单管理">
                    <i class="iconfont f14">&#xe65d;</i>
                    <span class="txt">榜单管理</span>
                    <span class="more"></span> 
                </a>
               
            </li>
        </ul>
    </div>
</div>
<!-- side  end****************************************************** -->
<script type="text/javascript">
(function($) {
    $(function() {
        var $a = $(".aside-menu").find('.treeview').children('a');
        var $parent;
        var $aside=$(".coms-layout-aside");
        var $body=$("#J_coms-layout-body");
        $.each($a, function(index, el) {
            $(el).on("click", function() {
                var $this = $(this);
                $parent = $this.parent("li");
                if ($parent.hasClass('hactive')) {
                    $parent.removeClass('hactive');
                } else {
                    $parent.addClass('hactive');
                }
            })
        });
        $(".aside-unfold").on("click",function(){
            if($aside.hasClass('fold')){
                $aside.removeClass('fold');
                $body.removeClass('unfold');
            }else{
                $aside.addClass('fold');
                $body.addClass('unfold');
                $aside.find(".treeview").removeClass('hactive');
            }
        })
    })
})(jQuery)
</script>
    <div class="coms-layout-body p15" id="J_coms-layout-body">
        <div class="coms-elem-quote am-cf">
	<span class="fl f16">榜单——创建榜单</span>
	<ol class="am-breadcrumb fr p0 m0"><li><a href="#">首页</a></li><li><a href="#">分类</a></li><li class="am-active">内容</li></ol>
</div>


        <div class="coms-table-wrap pl20 pr20 mt40">
            <form action="" class="am-form am-form-horizontal" data-am-validator>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>榜单名称：</label>
                    <div class="am-para-input wp50">
                        <input type="text" minlength="3" placeholder="输入榜单名称" required />
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>标签：</label>
                    <div class="am-para-input">
                        <a href="#" class="am-btn am-btn-link fl underline">添加标签</a><span class="f12 fl clr999 lh-default ml5">(选择合适的标签，最多选3个)</span>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>标签：</label>
                    <div class="am-para-input">
                        <ul class="fl tags-list">
                            <li class="am-btn am-btn-default am-active mr20">标签1<a href="" class="am-close am-close-alt am-icon-times"></a></li>
                            <li class="am-btn am-btn-default am-active mr20">标签2<a href="" class="am-close am-close-alt am-icon-times"></a></li>
                            <li class="am-btn am-btn-default am-active mr20">标签3<a href="" class="am-close am-close-alt am-icon-times"></a></li>
                        </ul>
                        <a href="#" class="am-btn am-btn-link fl underline">添加标签</a><span class="f12 fl clr999 lh-default ml5">(选择合适的标签，最多选3个)</span>
                    </div>
                    <style type="text/css">
                    .tags-list li {
                        position: relative;
                    }

                    .tags-list li a {
                        position: absolute;
                        right: -12px;
                        top: -12px;
                    }
                    </style>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>介绍：</label>
                    <div class="am-para-input wp50">
                        <textarea rows="5" minlength="2" maxlength="100000" required></textarea>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>列表样式：</label>
                    <div class="am-para-input">
                        <label class="am-radio-inline">
                            <input type="radio" value="" name="docInlineRadio"> 大图</label>
                        <label class="am-radio-inline">
                            <input type="radio" value="" name="docInlineRadio"> 小图</label>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>添加好店：</label>
                    <div class="am-para-input wp50">
                        <div class="haodian-sel-list">
                            <div class="caption">已选好店</div>
                            <div class="coms-nodata-1">
                                <p class="hd"><span class="iconfont">&#xe609;</span>暂时没有已选好店</p>
                                <p class="align-c pb30 pt20"><a href="#" class="am-btn am-btn-primary pl25 pr25">添加</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"><span class="com-must-star">*</span>添加好店：</label>
                    <div class="am-para-input wp50">
                        <div class="haodian-sel-list">
                            <div class="caption">已选好店</div>
                            <ul class="list">
                                <li>
                                    <span class="name">商家名称商家名称</span>
                                    <span class="sort-up iconfont am-text-success f20"><b>&#xe6a9;</b></span>
                                    <span class="sort-down iconfont am-text-success f20"><b>&#xe6a8;</b></span>
                                    <span class="del iconfont f20 ml30">&#xe632;</span>
                                </li>
                                <li>
                                    <span class="name">商家名称商家名称</span>
                                    <span class="sort-up iconfont am-text-success f20"><b>&#xe6a9;</b></span>
                                    <span class="sort-down iconfont am-text-success f20"><b>&#xe6a8;</b></span>
                                    <span class="del iconfont f20 ml30">&#xe632;</span>
                                </li>
                                <li>
                                    <span class="name">商家名称商家名称</span>
                                    <span class="sort-up iconfont am-text-success f20"><b>&#xe6a9;</b></span>
                                    <span class="sort-down iconfont am-text-success f20"><b>&#xe6a8;</b></span>
                                    <span class="del iconfont f20 ml30">&#xe632;</span>
                                </li>
                                <li>
                                    <span class="name">商家名称商家名称</span>
                                    <span class="sort-up iconfont am-text-success f20"><b>&#xe6a9;</b></span>
                                    <span class="sort-down iconfont am-text-success f20"><b>&#xe6a8;</b></span>
                                    <span class="del iconfont f20 ml30">&#xe632;</span>
                                </li>
                            </ul>
                            <p class="align-c pb30 pt20"><a href="#" class="am-btn am-btn-primary  pl25 pr25">添加</a></p>
                        </div>
                        
                    </div>
                </div>

                <div class="am-form-group">
                    <label class="am-para-label"></label>
                    <div class="am-para-input">
                        <input type="submit" class="am-btn am-btn-success am-btn-xl pl40 pr40 mr20" name="提交" />
                        <input type="reset" class="am-btn am-btn-default am-btn-xl  pl40 pr40" name="重置" />
                    </div>
                </div>
        </div>
    </div>
    </div>
    <style type="text/css">
    .haodian-sel-list {
        border: 1px solid #f2f2f2;
    }

    .haodian-sel-list .caption {
        line-height: 37px;
        padding: 0 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    .haodian-sel-list .list {
        padding: 10px 20px;
    }

    .haodian-sel-list li {
        line-height: 40px;
        border-bottom: 1px solid #f2f2f2;
    }

    .haodian-sel-list li .name {
        width: 60%;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
    }

    .haodian-sel-list li .sort-up {
        width: 40px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        vertical-align: middle;
    }

    .haodian-sel-list li .sort-up:hover {
        color: #3f7b3f;
    }

    .haodian-sel-list li .sort-down {
        width: 40px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        vertical-align: middle;
    }

    .haodian-sel-list li .sort-down b {
        display: inline-block;
        padding-top: 2px;
    }

    .haodian-sel-list li .sort-down:hover {
        color: #3f7b3f;
    }

    .haodian-sel-list li .del {
        color: #f60;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
    }
    </style>
</body>

</html>